Coding JavaScript for Mobile Browsers (part 5)

2.6. History and URL management

JavaScript has a few standard mechanisms for browser history management: the location and history objects. The location object has several properties regarding the address, like href for the whole URL and hash for the anchor part of the URL, if present (the # and everything to the right of it). Changing the location.href property will redirect the browser to another page, on compatible devices. It has two useful methods: reload(), which refreshes the same page, and replace(url), which sends the user to another page without creating a new history entry.

Warning:

Remember to use JavaScript as little as possible to reduce battery consumption (one of the main problems today in the mobile environment).

The history object has a few not-very-useful properties and three methods: back(), go(number), and forward(). The back method is the most commonly used, for emulating a back button:

<!-- As a button -->
<input type="button" onclick="history.back()" value="Back" />
<!-- As a link -->
<a href="javascript:history.back()">Back</a>

Remember that we are designing for mobile browsers, and sometimes the users will be browsing in full-screen mode without any browser buttons in sight. A link or button for going back will be more useful here than in desktop websites.

Table 8 shows what happens when we try to manage the history and location using JavaScript in mobile devices.

2.7. Manipulating windows

One of the most popular (and annoying) features of JavaScript is the usage of window.open for opening the classic pop-up windows. For mobile browsers, the usage of this technique is not ideal, for many reasons. Many browsers can’t open multiple windows (although Figure 3 shows one that can in action), and we cannot define any attributes for the pop-ups; they will just be full-sized, like the main window. Communication between the opener and the pop-up also often does not work well. Finally, closing pop-ups can be problematic on browsers that treat the new window as a normal page and not a pop-up, because window.close only works on pop-ups.

So, if you can, avoid using pop-ups. If you really need one for some reason, open the window after an onclick event (avoid opening windows in the onload event or inside a timer callback) and remember that some mid- and low-end devices will not show your window.

Note:

A better alternative is to use a link with target="_blank". This will have the same result in mobile devices as a window.open call, and it will work on every browser. If the browser doesn’t support multiple windows, it will just replace the current one.

Table 9 reports on how the different browsers handle window.open.